<template>
    <div class="bc-checkbox-group">
        <bc-checkbox v-for="(item ,index) in data"
        :label="item.label||item.value||item" 
        :value="item.value||item"
        :isDisabled="item.disabled"
        v-model="groupValue"
        @change="handleChange"
        :key="index"></bc-checkbox>
    </div>
</template>

<script>
import BcCheckbox from './checkbox.vue'
export default {
    // 不加名字会报错
    // Cannot read property 'toLowerCase' of undefined
    name: 'BcCheckboxGroup',
    components: {
        BcCheckbox
    },
    props: {
        data: Array,
        value: Array
    },
    data() {
        return {
            groupValue: this.value
        }
    },
    watch: {
        value(val) {
            this.groupValue = val;
        }
    },
    methods: {
        handleChange() {
            this.$emit('input', [...this.groupValue]);
            this.$emit('change', [...this.groupValue]);
        },
        selectAll() {
            let value = [];
            if (this.data) {
                for(let i=0;i<this.data.length;i++) {
                    if(this.data[i].disabled && 
                    this.value.indexOf(this.data[i].value) === -1) {
                        // 禁用且没有勾选的过滤
                        continue;
                    }
                    value.push(this.data[i].value);
                }
            }
            this.$emit('input', value);
        },
        clearAll() {
            let value = [];
            this.data && this.data.forEach(item => {
                if (item.disabled && this.value.indexOf(item.value) !== -1) {
                    // 禁用且勾选了的过滤
                    value.push(item.value);
                }
            })
            this.$emit('input', value);
        }
    }
}
</script>